'use strict';
import React, {Component} from "react";
import {
    ScrollView,
    View,
    Text,
    Image,
    Dimensions,
    StyleSheet,
    TouchableOpacity,
    ActivityIndicator,
    InteractionManager
} from "react-native";
import ToolBar from "../Components/ToolBar";
import WebContainer from "../Components/WebContainer";
import SpecialtyDetailsPage from "./SpecialtyDetailsPage";
import BottomShareView from "../Components/BottomShareView";
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
import AllGoodsPage from "./AllGoodsPage";
import Global from "../Commom/GlobalConst";
let width = Dimensions.get('window').width;

const styles = StyleSheet.create({
    avatarTop: {
        height: 80,
        padding: 10,
        borderBottomColor: '#F2F3F5',
        borderBottomWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    avatarImg: {
        width: 50,
        height: 50,
        borderRadius: 25
    },
    avatarName: {
        width: 60,
        fontSize: 16,
        textAlign: 'center',
    },
    rowSpaceBetween: {
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    shopBox: {
        borderWidth: 1,
        borderColor: '#F2F3F5',
        marginRight: 10,
        marginLeft: 10,
        alignItems: 'center',
        justifyContent: 'center',
        width: (width - 60) / 2,
    },
    addBtnBox: {
        width: 30,
        height: 30,
        backgroundColor: '#38D68B',
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    addBtn: {
        fontSize: 22,
        color: 'white',
        fontWeight: '400'
    }
});

class FarmerStoryPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            farmer: {},
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            RuralLibraryAPIService.farmerStoryDetails(this.props.id).then((ret)=> {
                this.setState({
                    isLoading: false,
                    farmer: ret,
                })
            }).catch((err)=> {

            });
        });
    }


    goToSpecialtyPage(id) {
        this.props.navigator.push({
            name: 'SpecialtyDetailsPage',
            component: SpecialtyDetailsPage,
            passProps: {
                ID: id,
            }
        });
    }

    goToAll() {
        this.props.navigator.push({
            name: 'AllGoodsPage',
            component: AllGoodsPage,
            passProps: {
                ID: this.props.id,
            }
        })
    }

    render() {
        var html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body><div style="padding: 8px;">' + this.state.farmer.content + '</div></body></html>';

        return (
            <View style={{flex: 1,backgroundColor:'white'}}>
                {
                    this.state.isLoading ? <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                        style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                animating={this.state.animating}
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>加载中...</Text>
                        </View>
                    </View>
                    </View> :
                        <View style={{flex: 1}}>
                            <ToolBar leftFunc={()=>this.props.navigator.pop()} title={'农人故事'} rightFunc={()=> {
                                this.shareView.showShareView();
                            }}/>
                            <ScrollView style={{flex: 1}}>
                                <View style={styles.avatarTop}>
                                    <Image
                                        style={styles.avatarImg}
                                        source={{uri:this.state.farmer.avatar}}
                                    />
                                    <Text numberOfLines={1} style={styles.avatarName}>{this.state.farmer.name}</Text>
                                </View>
                                <WebContainer html={html}/>
                                <View
                                    style={{
                                        borderTopWidth: 10,
                                        borderTopColor: '#F2F3F5',
                                        backgroundColor: 'white'
                                    }}
                                >
                                    {this.state.farmer.shop_list.length > 0 ?
                                        <View style={[
                                        styles.rowSpaceBetween,
                                        {
                                            borderBottomColor: '#F2F3F5',
                                            borderBottomWidth: 1,
                                        }
                                    ]}>
                                            <Text>农家有售</Text>
                                            <TouchableOpacity onPress={() => this.goToAll()}>
                                                <Text>更多</Text>
                                            </TouchableOpacity>
                                        </View> : null}
                                    <View style={styles.rowSpaceBetween}>
                                        {
                                            this.state.farmer.shop_list ?
                                                this.state.farmer.shop_list.map((item, index) => {
                                                    return (
                                                        <TouchableOpacity
                                                            key={'farmerShop' + index}
                                                            onPress={() => this.goToSpecialtyPage(item.id)}
                                                        >
                                                            <View
                                                                style={styles.shopBox}>
                                                                <Image style={{
                                                                    width: (width - 80) / 2,
                                                                    height: (width - 80) / 2 + 10,
                                                                }} source={{uri:item.images}}/>
                                                                <View style={[styles.rowSpaceBetween, {padding: 5,}]}>
                                                                    <View style={{flex: 1,}}
                                                                    >
                                                                        <Text numberOfLines={1}
                                                                              style={{
                                                                                  fontSize: 14,
                                                                                  color: 'black'
                                                                              }}>{item.title}</Text>
                                                                        <Text numberOfLines={1}
                                                                              style={{
                                                                                  color: 'red',
                                                                                  fontSize: 14,
                                                                                  marginTop: 5,
                                                                              }}
                                                                        >{'￥' + item.price}<Text style={{
                                                                                    textDecorationLine: 'line-through',
                                                                                    color: '#ccc',
                                                                                    textDecorationColor: '#F2F3F5',
                                                                                    fontSize: 12,
                                                                                    marginRight: 5
                                                                                }}>{'￥' + (item.price * 1.2)}</Text>
                                                                        </Text>
                                                                    </View>

                                                                </View>
                                                            </View>
                                                        </TouchableOpacity>
                                                    )
                                                })
                                                : null
                                        }
                                    </View>
                                </View>
                            </ScrollView>
                        </View>
                }
                <BottomShareView
                    shareTitle={ this.state.farmer.name}
                    shareContent={this.state.farmer.introduce}
                    shareImageUrl={this.state.farmer.avatar}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </View>
        )
    }

}

export default FarmerStoryPage;